上一篇的最後我們提到今天要來補完Update和Delete，可是阿森不想讓所有人都可以控制我們的留言，這時候就會需要用到一個登入系統，讓網頁知道誰是老大，誰可以任意更改！
所以今天我會一次把登入、更新、刪除介紹完，真的是賺爛了賺爛了。
要用到登入系統就不得不介紹到Session，而說到Session又不得不說到Cookies，但因為這些內容太多了，我們就先跳過吧！，我們就大概講解一下吧！
其實我們現在在用的http( Hyper Text Transfer Protocol )是一種無狀態( Stateless )的通訊協定，也就是說每一筆資料的傳輸對伺服器端來說都是相同的。
但為了有效區分出每個使用者的差異，Cookie和Session就誕生了。
前者是透過將相關資料存在使用者的電腦中，每當瀏覽器需要確認使用者時，便會讀取相關資料；
而後者則是將這些資料儲存在伺服器端，並在使用者電腦中產生Session key存入Cookie，當你再次瀏覽時便會透過比對這些Session key來確認你之前的使用資料。
這裡阿森只是大概介紹一下兩者及兩者的差異，想要深入了解的話可以多上網查資料，很多大神都介紹的很詳細了！
那接下來就讓我們開始登入吧。
這時候我們先創立一個新的php檔案叫login.php，並在裡面輸入以下指令：
//要使用session就要先輸入以下指令：
<?php
session_start();
?>
接下來我們在下面寫一個簡單的登入頁面：
<!DOCTYPE html>
<html>
<head>
<title>Sen Chao's Login Page</title>
</head>
<body>
<div class="container">
<h1>Please Log In</h1>
<?php
if ( isset($_SESSION['error']) ) {
// Look closely at the use of single and double quotes
echo('<p style="color: red;">'.htmlentities($_SESSION['error'])."</p>\n");
unset($_SESSION['error']);
}
?>
<form method="POST">
<label for="nam">使用者信箱</label>
<input type="text" name="email" id="nam"><br/>
<label for="id">密碼</label>
<input type="text" name="pass" id="id"><br/>
<input type="submit" value="Log In">
<input type="submit" name="cancel" value="Cancel">
</form>
</div>
</body>
然後是負責處裡他的php，我們寫在session_start()下面就好：
//在使用者人數少的情況下，我們可以在php中直接設定簡單的帳號密碼，如果要全部管理可能就要用到資料庫了。
//用到資料庫的方法跟先前介紹的也差不多，想用的可以搭配前幾天的文章試試看。
$email= 'senchao0930@gmail.com';
$password = 'aa12345';
if ( isset($_POST['email']) && isset($_POST['pass']) ) {
unset($_SESSION['email']);
unset($_SESSION['pass']);
$_SESSION['email'] = $_POST['email'];
$_SESSION['pass'] = $_POST['pass'];
if ( strlen($_SESSION['name']) < 1 || strlen($_SESSION['pass']) < 1 ) {
$_SESSION['error'] = "兩個都須輸入喔！";
header("Location: login.php");
return;
} else if(strpos($_SESSION['name'], "@")===false){
$_SESSION['error'] = "信箱必須包含(@)符號。";
header("Location: login.php");
return;
} else {
if ($_SESSION['email']== $email && $_SESSION['pass']== $password) {
// Redirect the browser to autos.php
error_log("登入成功".$_SESSION['name']);
header("Location: index.php");
return;
} else {
$_SESSION['error'] = "Incorrect password";
error_log("登入失敗".$_SESSION['name']." $check");
header("Location: login.php");
return;
}
}
}
這時候我們回到原先的index.php，在foreach迴圈中加入以下指令：
echo('<a href="edit.php?id='.$row['id'].'">Edit</a> / ');
echo('<a href="delete.php?id='.$row['id'].'">Delete</a>');
然後在style.css中加入一點裝飾：
.comment a {
background: grey;
border-radius: 5px;
padding: 1px;
color: white;
text-decoration: none;
margin: 4px;
}
這時候我們需要新增兩個php檔，分別是delete.php和edit.php：
delete.php
<?php
session_start();
require_once "pdo.php";
if ( ! isset($_SESSION['email']) ) {
die('Not logged in');
}
if(isset($_POST['cancel'])){
header( 'Location: index.php');
return;
}
$id = $_GET['id'];
$stmt = $pdo->prepare("SELECT `name`, `msg`, `mail` FROM `msg` where id = :id");
$stmt->execute(array(":id" => $id));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ( $row === false ) {
$_SESSION['error'] = '查無此留言';
header( 'Location: index.php' ) ;
return;
}
if(isset($_POST['delete'])){
$stmt = $pdo->prepare('DELETE FROM msg WHERE id = :id');
$stmt -> execute(array(
'id' => $id
));
$_SESSION['success'] = '成功刪除';
header( 'Location: index.php' ) ;
return;}
?>
<html>
<p>確認刪除 <?=htmlentities($row['name'])?> 留言的 <?=htmlentities($row['msg'])?> ?</p>
<form method = "post">
<input type="submit" name="delete" value="確認">
<input type="submit" name="cancel" value="取消">
</form>
在來是edit.php：
<?php
session_start();
require_once "pdo.php";
$id = $_GET['id'];
$stmt = $pdo->prepare("SELECT `name`, `msg`, `mail` FROM `msg` where id = :id");
$stmt->execute(array(":id" => $id));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ( $row === false ) {
$_SESSION['error'] = '查無此留言';
header( 'Location: index.php' );
return;
}
if(isset($_POST['cancel'])){
header( 'Location: index.php');
return;
}
if(isset($_POST['save'])){
$stmt = $pdo ->prepare("UPDATE msg SET name= :name, msg= :msg, mail= :mail where id= :id");
$stmt ->execute(array(
":name" => $_POST['name'],
":msg" => $_POST['msg'],
":mail" => $_POST['mail'],
":id" => $id
));
header("Location: index.php");
return;
}
?>
<html>
<h1>編輯留言</h1>
<form method="post">
<p>稱呼：
<input type="text" name="name" value="<?=$row['name']?>"></p>
<p>信箱：
<input type="text" name="mail" value="<?=$row['mail']?>"></p>
<p>訊息：
<input type="text" name="msg" value="<?=$row['msg']?>"></p>
<input type="submit" name="save" value="儲存">
<input type="submit" name="cancel" value="取消">
</p>
</form>
我們可以看到在上面的index.php裡anchor tag的檔案名稱後有加上" ?id= "，這其實就是透過GET這個方法在頁面之間傳遞訊息。
在來我們要在index.php中加入一個登入按鈕，我們可以透過下面這串：
<h4>Sen Chao <a class="login" href="login.php">登入</a></h4>
這樣就可以在h4姓名旁邊加入一個登入按鈕。
再加上一點裝飾：
.login {
right: 0;
text-decoration: none;
font-size: 1rem;
background: gray;
border-radius: 5px;
padding: 5px;
color: white;
}
都完成之後我們的網頁大概是這樣：
編輯頁面：
刪除頁面：
這樣我們一個頁面中的CRUD就都完成囉！PHP的各種基本應用也大致介紹完了，接下來會介紹一個方法讓各位上架自己做好的網頁，就是使用先前提過的ngrok，那我們就明天再見吧！
iThome鐵人賽
看影片追技術